<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto">
            <el-form-item label="日期" prop="time">
                <el-date-picker
                    v-model="queryParams.time"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="广告位ID" prop="ads_id">
                <el-input
                    v-model="queryParams.ads_id"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="DSP ID" prop="dsp_id">
                <el-input
                    v-model="queryParams.dsp_id"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    :loading="exportLoading"
                    @click="handleExport"
                >导出
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-tabs v-model="activeName">
            <el-tab-pane label="数据列表" name="data">
                <el-table v-loading="loading" ref="table" :data="tableData.list">
                    <el-table-column type="index" label="序号" width="55" align="center"/>
                    <!-- 日期列 -->
                    <el-table-column label="时间" align="center" prop="time" width="100px"/>
                    <!-- 具体时间点列 -->
                    <el-table-column label="小时" align="center" prop="hour" width="120px"
                                     :formatter="(row, column)=>{return parseTime(row[column.property], '{y}-{m}-{d} {h}')}"/>
                    <!-- 媒体唯一标识列 -->
                    <el-table-column label="媒体ID" align="center" prop="media_id"/>
                    <!-- 广告唯一标识列 -->
                    <el-table-column label="广告ID" align="center" prop="ads_id"/>
                    <!-- 请求次数列 -->
                    <el-table-column label="请求" align="center" prop="req"/>
                    <!-- 展示次数列 -->
                    <el-table-column label="展示" align="center" prop="show"/>
                    <!-- 点击次数列 -->
                    <el-table-column label="点击" align="center" prop="click"/>
                    <!-- 点击率-->
                    <el-table-column label="点击率%" align="center" prop="click_rate"/>
                    <!-- 花费金额列 -->
                    <el-table-column label="CPC" align="center" prop="cpc"/>
                    <!-- 花费金额列 -->
                    <el-table-column label="CPM" align="center" prop="cpm"/>
                    <!-- 利润金额列 -->
                    <el-table-column label="收入" align="center" prop="margin"/>
                    <el-table-column label="更新时间" align="center" prop="uptime" width="150px"
                                     :formatter="(row, column)=>{return parseTime(row[column.property], '{y}-{m}-{d} {h}:{i}:{s}')}"/>
                    <!--            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
                    <!--                <template slot-scope="scope">-->
                    <!--                    <el-button-->
                    <!--                        size="mini"-->
                    <!--                        type="text"-->
                    <!--                        icon="el-icon-view"-->
                    <!--                        @click="handleLook(scope.row)"-->
                    <!--                    >查看-->
                    <!--                    </el-button>-->
                    <!--                </template>-->
                    <!--            </el-table-column>-->
                </el-table>
                <pagination
                    v-show="tableData.total>0"
                    :total="tableData.total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />
            </el-tab-pane>
            <el-tab-pane label="图表展示" name="echarts">
                <div style="width: 1600px;height: 600px" ref="chart"></div>
            </el-tab-pane>
        </el-tabs>


        <el-dialog title="查看详情" :visible.sync="logDetailDialog.open" width="50%" :close-on-click-modal="false"
                   append-to-body>
            <json-viewer
                :value="logDetailDialog.jsonData"
                :expand-depth=3
                copyable
                boxed
                sort
            ></json-viewer>
        </el-dialog>
    </div>

</template>

<script>
import {
    list,
    chartData,
    exportData,
} from "@/api/business/stat"
import JsonViewer from 'vue-json-viewer'
import {parseTime} from "@/utils/ruoyi";
import echarts from 'echarts'
import {exportStopWord} from "@/api/system/stopWord";

require('echarts/theme/macarons') // echarts theme


export default {
    name: "index",
    components: {
        JsonViewer,
    },
    data() {
        return {
            exportLoading: false,
            activeName: "data",
            chart: null,
            // 遮罩层
            loading: false,
            // 显示搜索条件
            showSearch: true,
            tableData: {
                list: [],
                total: 0
            },
            // 日期范围
            queryParams: {
                time: null,
                ads_id: null,
                dsp_id: null,
                pageNum: 1,
                pageSize: 10,
            },
            logDetailDialog: {
                open: false,
                jsonData: null
            },
        }
    },
    created() {
        this.queryParams.time = parseTime(new Date(), '{y}-{m}-{d}');
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            list(this.queryParams).then(response => {
                if (response.data) {
                    this.tableData.list = response.data.data;
                    this.tableData.total = response.data.count;
                }
                this.loading = false;
            });
            this.getEcharts();
        },
        handleExport() {
            const queryParams = JSON.parse(JSON.stringify(this.queryParams));
            queryParams.pageSize = 5000;
            this.$modal.confirm('是否确认导出所有数据, 最大支持5000条.').then(() => {
                this.exportLoading = true;
                return exportData(queryParams);
            }).then(response => {
                this.$download.name(response.msg);
                this.exportLoading = false;
            }).catch(() => {
            });
        },
        getEcharts() {
            chartData(this.queryParams).then(response => {
                let list = response.data.data;
                //获取list的hour_part
                let xAxisData = [];
                for (let i = 0; i < list.length; i++) {
                    xAxisData.push(list[i].hour_part);
                }

                var map = {
                    "展示次数": 'show_sum',
                    "点击次数": 'click_sum',
                    "请求次数": 'req_sum',
                    "出价次数": 'bid_sum',
                    "花费金额": 'cost_sum',
                    "收入金额": 'revenue_sum',
                    "利润金额": 'margin_sum',
                }

                var mapColor = {
                    "展示次数": '#f7b851',
                    "点击次数": '#58c8da',
                    "请求次数": '#81e714',
                    "出价次数": '#FF4500',
                    "花费金额": '#FFD700',
                    "收入金额": '#FFC0CB',
                    "利润金额": '#FF7F50',
                }

                let legendData = [];

                //拼接series
                let seriesData = [];
                Object.keys(map).map(key => {
                    legendData.push(key)

                    let data = [];
                    for (let i = 0; i < list.length; i++) {
                        data.push(list[i][map[key]]);
                    }

                    seriesData.push({
                        name: key,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        symbol: 'circle',
                        symbolSize: 6,
                        data: data,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(199, 237, 250,0.5)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(199, 237, 250,0.2)'
                                }], false)
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: mapColor[key]
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 3
                            }
                        }
                    })
                })
                this.renderingChart(legendData, xAxisData, seriesData);
            });


        },
        renderingChart(legendData, xAxisData, seriesData) {
            this.chart = echarts.init(this.$refs.chart, 'macarons')
            var option = {
                title: {
                    text: '趋势分析图',
                    left: '50%',
                    textAlign: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    backgroundColor: 'rgba(255,255,255,1)',
                    padding: [5, 10],
                    textStyle: {
                        color: '#7588E4',
                    },
                    extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
                },
                legend: {
                    right: 20,
                    orient: 'vertical',
                    data: legendData
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    boundaryGap: false,
                    splitLine: {
                        show: true,
                        interval: 'auto',
                        lineStyle: {
                            color: ['#D4DFF5']
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#609ee9'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 14
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: ['#D4DFF5']
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#609ee9'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 14
                        }
                    }
                },
                series: seriesData
            };
            this.chart.setOption(option)
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        handleLook(row) {
            this.logDetailDialog.open = true
            this.logDetailDialog.jsonData = row;
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }

    }

}
</script>

<style scoped>

</style>
